<template>
  <div>
    <p>此处会根据配置的表关系, 进行脏数据分析,由用户来决定是否需要清除脏数据</p>
    <el-button :disabled="!connName" size="small" type="primary" @click="analyse" :loading="loading">开始分析</el-button>
    <el-row class="margin-top">
      <el-col :span="24">
        <el-table
          :data="result"
          size="mini"
          border
          stripe
        >
          <el-table-column label="关系">
            <template slot-scope="{row}">
              {{row.tableRelation.sourceTableName}}.{{row.tableRelation.sourceColumnName}}
              {{row.tableRelation.relation}}
              {{row.tableRelation.targetTableName}}.{{row.tableRelation.targetColumnName}}
            </template>
          </el-table-column>

          <el-table-column label="将要执行的语句">
            <template slot-scope="{row}">
              <ul>
                <li v-for="deleteItem in row.deleteItems">
                  <span>{{deleteItem.deleteSql}} <b>删除行数: {{deleteItem.total}}</b></span>
                  <el-button type="text" size="small" class="margin-left">执行</el-button>
                </li>
              </ul>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import database from '@/api/database'

export default {
  name: 'DirtyDataCheck',
  props: {
    connName: String,
    namespace: Object
  },
  data(){
    return {
      result: null,
      loading: false,
    }
  },
  methods: {
    analyse(){
      this.loading = true;
      database.checkDirtyData(this.connName,this.namespace).then(res => {
        this.loading = false;
        this.result = res.data;
      }).catch(() => {
        this.loading = false;
      })
    }
  }
}
</script>

